<template>
  <div>
    <!-- 头部文字 -->
    <div class="dingdan">
      <h2>订单</h2>
    </div>
    <!-- 标签页 -->
    <van-tabs v-model:active="active">
      <van-tab title="全部">
        <div style="margin-bottom: 50px;">
          <van-card tag="热门" price="200.00" desc="描述信息" title="商品标题"
            thumb="https://img0.baidu.com/it/u=680130849,2868739234&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"
            origin-price="99999" />
          <van-card tag="热门" price="1699.00" desc="已收货" title="商品标题"
            thumb="https://img0.baidu.com/it/u=2718825841,4281827366&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
            origin-price="19999" />
          <van-card tag="热门" price="49888.00" desc="正在路上" title="商品标题"
            thumb="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            origin-price="99999" />
          <van-card tag="热门" price="49888.00" desc="快递站" title="商品标题"
            thumb="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            origin-price="99999" />
          <van-card tag="热门" price="49888.00" desc="描述信息" title="商品标题"
            thumb="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            origin-price="99999" />
          <van-card tag="热门" price="49888.00" desc="描述信息" title="商品标题"
            thumb="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            origin-price="99999" />
        </div>
      </van-tab>
      <van-tab title="待付款">
        <div style="margin-bottom: 50px;">
          <van-card tag="热门" price="200.00" desc="描述信息" title="商品标题"
            thumb="https://img0.baidu.com/it/u=498271711,2058981612&fm=253&fmt=auto&app=138&f=PNG?w=525&h=453"
            origin-price="99999" />
          <van-card tag="热门" price="1699.00" desc="已收货" title="商品标题"
            thumb="https://img0.baidu.com/it/u=2718825841,4281827366&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
            origin-price="19999" />
          <van-card tag="热门" price="49888.00" desc="正在路上" title="商品标题"
            thumb="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            origin-price="99999" />
          <van-card tag="热门" price="49888.00" desc="快递站" title="商品标题"
            thumb="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            origin-price="99999" />
          <van-card tag="热门" price="49888.00" desc="描述信息" title="商品标题"
            thumb="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            origin-price="99999" />
          <van-card tag="热门" price="49888.00" desc="描述信息" title="商品标题"
            thumb="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            origin-price="99999" />
        </div>
      </van-tab>
      <van-tab title="待发货">
        <div style="margin-bottom: 50px;">
          <van-card tag="热门" price="1699.00" desc="已收货" title="商品标题"
            thumb="https://img0.baidu.com/it/u=2718825841,4281827366&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
            origin-price="19999" />
          <van-card tag="热门" price="200.00" desc="描述信息" title="商品标题"
            thumb="https://img0.baidu.com/it/u=680130849,2868739234&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"
            origin-price="99999" />
          <van-card tag="热门" price="1699.00" desc="已收货" title="商品标题"
            thumb="https://img0.baidu.com/it/u=2718825841,4281827366&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
            origin-price="19999" />
          <van-card tag="热门" price="49888.00" desc="正在路上" title="商品标题"
            thumb="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            origin-price="99999" />
          <van-card tag="热门" price="49888.00" desc="快递站" title="商品标题"
            thumb="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            origin-price="99999" />
          <van-card tag="热门" price="49888.00" desc="描述信息" title="商品标题"
            thumb="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            origin-price="99999" />
          <van-card tag="热门" price="49888.00" desc="描述信息" title="商品标题"
            thumb="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            origin-price="99999" />
        </div>
      </van-tab>
      <van-tab title="待收货">
        <div style="margin-bottom: 50px;">
          <van-card tag="热门" price="200.00" desc="描述信息" title="商品标题"
            thumb="https://img0.baidu.com/it/u=680130849,2868739234&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"
            origin-price="99999" />
          <van-card tag="热门" price="1699.00" desc="已收货" title="商品标题"
            thumb="https://img0.baidu.com/it/u=2718825841,4281827366&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
            origin-price="19999" />
          <van-card tag="热门" price="49888.00" desc="正在路上" title="商品标题"
            thumb="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            origin-price="99999" />
          <van-card tag="热门" price="49888.00" desc="快递站" title="商品标题"
            thumb="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            origin-price="99999" />
          <van-card tag="热门" price="49888.00" desc="描述信息" title="商品标题"
            thumb="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            origin-price="99999" />
          <van-card tag="热门" price="49888.00" desc="描述信息" title="商品标题"
            thumb="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            origin-price="99999" />
        </div>
      </van-tab>
      <van-tab title="已退款">
        <div style="margin-bottom: 50px;">
          <van-card tag="热门" price="49888.00" desc="描述信息" title="商品标题"
            thumb="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            origin-price="99999" />
          <van-card tag="热门" price="200.00" desc="描述信息" title="商品标题"
            thumb="https://img0.baidu.com/it/u=680130849,2868739234&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"
            origin-price="99999" />
          <van-card tag="热门" price="1699.00" desc="已收货" title="商品标题"
            thumb="https://img0.baidu.com/it/u=2718825841,4281827366&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
            origin-price="19999" />
          <van-card tag="热门" price="49888.00" desc="正在路上" title="商品标题"
            thumb="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            origin-price="99999" />
          <van-card tag="热门" price="49888.00" desc="快递站" title="商品标题"
            thumb="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            origin-price="99999" />
          <van-card tag="热门" price="49888.00" desc="描述信息" title="商品标题"
            thumb="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            origin-price="99999" />
          <van-card tag="热门" price="49888.00" desc="描述信息" title="商品标题"
            thumb="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            origin-price="99999" />
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script  lang="ts">
import { ref } from 'vue';

export default {
  setup() {
    const active = ref(0);
    return { active };
  },
};

</script>

<style scoped>
.dingdan {
  line-height: 50px;
  text-align: center;
  box-shadow: 0 0 1px 1px gray;
}
</style>